<!-- 员工端-申请中心-申请中心 -->
<template>
  <div class="container">
    <a-space wrap>
      <div v-for="item in list" :key="item.id" @click="itemClick(item.id)">
        <a-card class="card-demo" hoverable>
          <IconFont type="icon-caisewendang" :size="30"> </IconFont>
          <span style="margin-left: 10px">{{ item.title }}</span>
        </a-card>
      </div>
    </a-space>
    <QuitModal
      :type="quitType"
      v-model:visible="quitModalVisiable"
      @AppApplyCenterQuitEmit="ApplyCenterQuitEmit"
    ></QuitModal>
  </div>
</template>

<script lang="ts" setup>
import QuitModal from './components/QuitModal/index.vue';

const list = reactive([
  {
    title: '离职申请',
    id: 2
  },
  {
    title: '被动离职申请',
    id: 3
  }
]);

let quitType = ref(0);
let quitModalVisiable = ref(false);

const itemClick = (id: number) => {
  switch (id) {
    // 离职申请
    case 2:
      quitType.value = 1;
      quitModalVisiable.value = true;
      break;
    // 被动离职申请
    case 3:
      quitType.value = 1;
      quitModalVisiable.value = true;
      break;
    default:
      break;
  }
};

const ApplyCenterQuitEmit = (formData: any) => {
  try {
    console.log(formData);
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.container {
  .card-demo {
    width: 200px;
    margin-left: 24px;
    transition-property: all;
    height: 60px;
    span {
      font-weight: 700;
      position: relative;
      top: -7px;
    }
  }
  .card-demo:hover {
    transform: translateY(-4px);
  }
}
</style>
